<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">

	<link rel="stylesheet" href="{% static 'css/ie8.css' %}">
	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="{% static 'css/ImgCropping.css' %}">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="{% static 'js/cropper.min.js' %}"></script><!-- jQuery is required -->

	<script src="{% static 'js/jquery.min.js"></script>
	<script src="{% static 'js/jquery.dropotron.min.js' %}"></script>
	<script src="{% static 'js/skel.min.js' %}"></script>
	<script src="{% static 'js/skel-panels.min.js' %}"></script>
	<script src="{% static 'js/init.js' %}"></script>

	<noscript>
			<link rel="stylesheet" href="{% static 'css/skel-noscript.css' %}" />
			<link rel="stylesheet" href="{% static 'css/style-desktop.css' %}" />
			<link rel="stylesheet" href="{% static 'css/style-noscript.css' %}" />
	</noscript>

    <link  href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
    <title></title>
</head>

<body class="homepage">


		<!-- Header -->
			<div id="header">

				<!-- Inner -->
					<div class="inner">
						<header>
							<h1><a href="#" id="logo">Graphic Process</a></h1>
							<hr />
							<span class="byline">Image processing website</span>
						</header>
						<footer>
							<a href="#banner" class="button circled scrolly">Start</a>
						</footer>
					</div>

				<!-- Nav -->
					<nav id="nav">
						<ul>
                            <li><a href="{% url 'introduction' %}">Introduction</a></li>
							<li><a href="{% url 'index' %}">Home/Basics</a></li>
							<li><a href="{% url 'ocr' %}">Recognition</a></li>

						</ul>
					</nav>

			</div>

		<!-- Carousel -->
	<div id="banner">
		<div class="carousel">
				<div class="reel">
					<article>
						<a class="image featured"><img src="static/images/pic01.jpg" alt="" /></a>
						<header>
							<h3><a href="{% url 'index' %}">Basic Function Operation</a></h3>
						</header>
						<p>Supports basic operations such as cropping and inversion.</p>
					</article>

					<article>
						<a class="image featured"><img src="static/images/pic02.jpg" alt="" /></a>
						<header>
							<h3><a href="{% url 'index' %}">Edge Detection</a></h3>
						</header>
						<p>Five kinds of operators are supported for edge detection.</p>
					</article>

					<article>
						<a  class="image featured"><img src="static/images/pic03.jpg" alt="" /></a>
						<header>
							<h3><a href="{% url 'index' %}">Morphological Processing</a></h3>
						</header>
						<p>Supports expansion, corrosion, open and close operations.</p>
					</article>

					<article>
						<a class="image featured"><img src="static/images/pic04.jpg" alt="" /></a>
						<header>
							<h3><a href="{% url 'ocr' %}">Character Recognition</a></h3>
						</header>
						<p>Supports Chinese and English text recognition.</p>
					</article>

					<article>
						<a class="image featured"><img src="static/images/pic05.jpg" alt="" /></a>
						<header>
							<h3><a href="{% url 'ocr' %}">Mask Detection</a></h3>
						</header>
						<p>Support the detection of normal masks and N95 masks.</p>
					</article>
				</div>
		</div>
</div>
</body>

</html>